<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="description" content="NG6-Starter by @AngularClass">

	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/base.css">
</head>

<body>
	<div class="header">
        <a href="javascript:;" class="ui-header-button left">返回</a>
		<h3 class="title">XXX,您在修改任务</h3>
		<a href="javascript:;" class="ui-header-button button-light right">保存</a>
	</div>
	<div class="form-label">
		<div class="form-tiny">
			<div class="new-title ">
				长标题<span class="count-tip">（<span class="wordCount" count-for="long-title">0</span>/70）</span>
			</div>
		</div>
		<div class="form-tiny">
			<textarea name="" id="long-title" rows="3" maxlength="70">这里是长标题</textarea>
		</div>
	</div>
	<div class="form-label">
		<div class="form-tiny mt10 border-b">
			<div class="new-title ">搜索关键词库</div>
			<div class="part-button">
				<span class="pane-control open">收起</span>
			</div>
		</div>
		<div class="form-tiny border-b">
			<div class="type">词库分类</div>
			<div class="part-button">
				<select name="" id="">
                    <option value="0">综合词</option>
                    <option value="1">关键词</option>
                </select>
			</div>
		</div>
		<div class="form-tiny border-b">
			<div class="type">搜索结果数</div>
			<div class="part-button">
				<select name="" id="">
                    <option value="0">100</option>
                    <option value="1">200</option>
                </select>
			</div>
		</div>
		<div class="form-tiny border-b">
			<div class="type">包含词：</div>
			<div class="text">
				<input type="text" class="clear-text" placeholder="请输入包含词">
			</div>
		</div>
		<div class="form-tiny border-b">
			<div class="type">排除词：</div>
			<div class="text">
				<input type="text" class="clear-text" placeholder="请输入包含词">
			</div>
		</div>
        <div class="form-tiny border-b">
			<div class="new-title ">
				搜索结果
			</div>
			<div class="part-button">
				<button class="ui-button button-blue-light">
                    搜索关键词库
                </button>
			</div>
		</div>
		<div class="form-tiny">
			<div class="item-list">
				<ul class="list" id="searchResult">
					<li>关键词1</li>
					<li>关键词2</li>
					<li>关键词3</li>
					<li>关键词4</li>
					<li>关键词5</li>
					<li>关键词6</li>
					<li>关键词7</li>
				</ul>
			</div>
			<div class="right-button mt10">
				<button class="ui-button button-blue-light" id="moveLocked">
                    挪到锁定区
                </button>
			</div>
		</div>
	</div>
	<div class="form-label mt10">
		<div class="form-tiny border-b">
			<div class="new-title ">
				关键词锁定区
			</div>
			<div class="part-button">
				<span class="pane-control open">收起</span>
				</button>
			</div>
		</div>
		<div class="form-tiny">
			<div class="item-list">
				<ul class="list" id="lockArea">

				</ul>
			</div>
			<div class="right-button mt10">
				<button class="ui-button button-blue-light" id="moveOutLocked">
                        挪出锁定区
                    </button>
			</div>
		</div>
	</div>
	<div class="form-label mt10">
		<div class="form-tiny border-b">
			<div class="new-title">
				标题其他信息
			</div>
			<div class="part-button">
				<span class="pane-control open">收起</span>
				</button>
			</div>
		</div>
		<div class="form-tiny">
			<div class="form-item">
				<label for="">短标题</label>
				<input type="text" placeholder="可换行" class="form-input">
			</div>
			<div class="form-item">
				<label for="">长标题核心词（用逗号“,”隔开）</label>
				<input type="text" placeholder="可换行" class="form-input">
			</div>
			<div class="form-item">
				<label for="">标题归类 | Tag（2-6个，用逗号“,”隔开）</label>
				<input type="text" placeholder="可换行" class="form-input">
			</div>
			<div class="form-item">
				<label for="">内容小标题</label>
				<textarea name="" id="long-title" rows="3" maxlength="70">这里是长标题</textarea>
			</div>
			<a class="ui-button button-block button-blue">保存</a>
		</div>

	</div>
	<script src="lib/dist/jquery.1.11.js"></script>
	<script src="lib/app.js"></script>
	<script src='lib/src/base.js'></script>
	<script>
        $(function(){
            var select = $('#searchResult,#lockArea')
            select.on('click', 'li', function(){
                var _this = $(this)
                if(_this.hasClass('on')){
                    _this.removeClass('on')
                }else {
                    _this.addClass('on')
                }
            })
            $('#moveLocked').on('click', function(){
                moveToLock()
            })
            $('#moveOutLocked').on('click', function(){
                moveOutLock()
            })
            function moveToLock() {
                var selected = $('#searchResult li.on')
                selected.each(function(i,n){
                    $(n).remove();
                })
                $('#lockArea').append(selected)
            }
            function moveOutLock() {
                var selected = $('#lockArea li.on')
                selected.each(function(i,n){
                    $(n).remove();
                })
                $('#searchResult').append(selected)
            }

            // 收缩，展开
            $('.pane-control').on('click', function(){
                var _this = $(this)
                if(_this.hasClass('close')) {
                    _this.removeClass('close')
                    _this.parents('.form-label').find('.form-tiny').show();
                } else {
                    _this.addClass('close')
                    _this.parents('.form-label').find('.form-tiny').hide();
                    _this.parents('.form-label').find('.form-tiny').eq(0).show();

                }
            })
        })
    </script>
</body>

</html>